/**
 *
 * @Author:   tiannanyihao
 * @Date:     2018-09-18 15:42
 * @Profile:  LFMineCell
 * @Project:  MeiTuan

 * @Description: Mine的自定义cell组件
 *
 */

import React, {Component} from 'react'
import {
	Platform,
	StyleSheet,
	View,
	Image,
	Text,
	TouchableOpacity,
} from 'react-native'

//**************************************** 资源导入 ****************************************//
import PropTypes from 'prop-types'
import {ScreenW, ScreenFixH} from "../../Common/Tools";
import {ScreenFixW} from "../../Common/Tools/Scale2Size";
import {LFColors} from "../../Common/Tools/LFColors";
import {LFImages} from "../../src/img";


//**************************************** 组件 ****************************************//
/**
 * cell主体
 */
export default class MineCell extends Component {

	static defaultProps = {

		leftImage: null,
		leftTitleName: '',
		rightTitleName: '',
		rightImage: {},
		isBottomLine: false, // 是否创建底部线条
		marginTopHeight: 0, // cell组件距离顶部的marginTop距离
		cellSelectBlock: {} // cell的选择方法
	}

	static propTypes = {
		marginTopHeight: PropTypes.number.isRequired,
		leftImage: PropTypes.any.isRequired,
		leftTitleName: PropTypes.string.isRequired,
		isBottomLine: PropTypes.bool.isRequired,
		cellSelectBlock: PropTypes.func.isRequired,
	}

	render() {
		return (
			<View style={{marginTop: this.props.marginTopHeight}}>
				{/*组件cell的主要内容*/}
				<TouchableOpacity onPress={this.props.cellSelectBlock}>
					<View style={styles.mineCellContainer}>
						{/*cell组件左侧视图*/}
						<MineLeftView img={this.props.leftImage} title={this.props.leftTitleName}/>
						{/*cell组件右侧视图*/}
						<MineRightView img={this.props.rightImage} title={this.props.rightTitleName}></MineRightView>
					</View>
				</TouchableOpacity>

				{/*判断并创建底部分隔线*/}
				{this.createBottomLine()}
			</View>
		)
	}

	// 判断并创建底部分隔线
	createBottomLine = () => {
		if (this.props.isBottomLine) {
			return (
				<View style={bottomLine.line}/>
			)
		} else {
			return null
		}

	}
}



/**
 * cell左侧视图
 */
class MineLeftView extends Component {

	static defaultProps = {
		img: {},
		title: ''
	}

	static propTypes = {
		img: PropTypes.any.isRequired,
		title: PropTypes.string.isRequired,
	}

	render() {
		return (

			<View style={mineLeft.mineLeftContainer}>
				{/*icon*/}
				<Image source={this.props.img} style={{
					width: ScreenFixW(24),
					height: ScreenFixW(24),
					borderRadius: ScreenFixW(24) / 2
				}}></Image>
				{/*文字*/}
				<Text style={mineLeft.text}>{this.props.title}</Text>
			</View>
		)
	}

}

/**
 * cell右侧视图
 */
class MineRightView extends Component {
	static defaultProps = {
		img: {},
		title: ''

	}

	static propTypes = {
		img: PropTypes.any.isRequired,
		title: PropTypes.string.isRequired,
	}


	render() {
		return (
			<View style={mineRight.rightContainer}>

				{/*判断并创建右侧视图的前半部分*/}
				{this.createArrowView()}

				{/*创建后半部分指示箭头*/}
				<Image source={LFImages.icon_cell_rightArrow} style={{
					width: ScreenFixW(10),
					height: ScreenFixW(10),
				}}/>
			</View>
		)
	}

	// 判断并创建右侧视图的前半部分
	createArrowView = () => {
		if (this.props.title.length > 0) {
			return (
				<Text style={mineRight.title}>{this.props.title}</Text>
			)
		}
		if (this.props.img != null) {
			return (
				<Image source={this.props.img} style={mineRight.img}/>
			)
		}
	}


}

// **************************************** 样式 ****************************************//

/**
 * cell 主要内容样式
 */
const styles = StyleSheet.create({
	mineCellContainer: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		backgroundColor: '#fff',
		width: ScreenW,
		height: ScreenFixH(47),
		paddingLeft: ScreenFixW(15),
		paddingRight: ScreenFixH(15),
	},

})

/**
 * 左侧视图样式
 */
const mineLeft = StyleSheet.create({

	mineLeftContainer: {
		flexDirection: 'row',
		alignItems: 'center',
		backgroundColor: '#fff',
	},
	text: {
		fontSize: 15,
		color: LFColors.textCellColorleft,
		marginLeft: ScreenFixW(5)
	}


})

/**
 * 右侧视图样式
 */
const mineRight = StyleSheet.create({

	rightContainer: {
		flexDirection: 'row',
		alignItems: 'center',
		backgroundColor: '#fff',
	},
	title: {
		fontSize: 13,
		color: LFColors.textCellColorleft,
		marginRight: ScreenFixW(5)
	},
	img: {
		marginRight: ScreenFixW(5)
	}


})

/**
 * 底部线条样式
 */
const bottomLine = StyleSheet.create({
	line: {
		width: ScreenW - ScreenFixW(15),
		marginLeft: ScreenFixW(15),
		height: 0.5,
		backgroundColor: LFColors.bottomLineColor,
		marginTop: -0.5,
	}
})
